<style lang="scss" scoped>
.box {
  // height: 100vh;
  width: 100vw;
  background-color: #f2f2f2;
  // overflow: hidden;
}

.imgItem {
  width: 100%;
  height: 53vh;

  img {
    width: 100%;
    height: 100%;
  }
}

.Title {
  width: 97%;
  // height: 15vh;
  background-color: #fff;
  padding: 1rem;
  margin-top: 0.5rem;
  border-radius: 0.5rem;

  button {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    background-color: #4dd676;
    border: none;
    // padding: 0 .2rem;
    color: #fff;
    border-radius: 15%;
    margin-right: 0.2rem;
  }
}

.consumption {
  width: 97%;
  background-color: #fff;
  border-radius: 0.5rem;
  margin-top: 0.5rem;

  img {
    width: 100%;
    margin-top: 0.5rem;
  }
}

.shopInfo {
  border-radius: 0.5rem;
  margin-top: 0.6rem;
  padding: 1rem;
  font-size: 0.9rem;
  width: 97%;
  background-color: #fff;

  p {
    line-height: 1.5rem;
    color: #666;

    span {
      margin-left: 1rem;
      color: #000;
    }
  }
}

.table {
  width: 97%;
  padding: 1rem;
  border-radius: 0.1rem;
  font-size: 0.9rem;
  background-color: #ffffff;
  border-radius: 1rem;
  margin-top: 0.5rem;

  table {
    width: 100%;
    color: #666;
    background-color: #f2f2f2;
    border-collapse: collapse;
    margin-top: 0.6rem;
    border-radius: 0.2rem;

    tr {
      td:first-child {
        width: 30%;
      }

      td:last-child {
        width: 70%;
      }

      td {
        border: 1px solid white;
        padding: 0.6rem;
      }
    }
  }
}
:deep(img) {
  width: 100%;
}
.cartImgae {
  width: 100%;
  height: 33%;
  display: flex;
  // background-color:red;
  margin-top: 1rem;
  img {
    height: 100%;
    flex: 0.35;
  }
  div {
    flex: 0.65;
  }
}
.albutton {
  padding: 0 1rem;
  button {
    padding: 0.1rem 0.5rem;
    border: none;
    border-radius: 0.2rem;
  }
}
.Subnum {
  width: 100%;
  display: flex;
  padding: 1rem;
  div:first-child {
    flex: 0.7;
  }
  div:last-child {
    flex: 0.3;
  }
}
</style>
<template>
  <van-nav-bar title="详情页" left-text="返回" left-arrow @click-left="onClickLeft" />
  <div class="box">
    <div class="imgItem">
      <img :src="item.image" alt="" />
    </div>
    <div class="Title">
      <div style="font-size: 1.5rem; color: red">￥{{ item.price }}</div>
      <p style="margin-top: 0.4rem">
        <button>{{ item.tag }}</button>{{ item.title }}
      </p>
    </div>
    <div class="consumption">
      <img src="@/assets/99.png" alt="" />
    </div>
    <div class="shopInfo">
      <p>
        药房<span>{{ item.vendor }}</span>
      </p>
      <p>运费<span>商家包邮</span></p>
      <p>
        服务<span style="color: #666"
          ><van-icon name="passed" />正品保证<van-icon name="passed" />隐私发货<van-icon
            name="passed"
          />不支持无理由退换</span
        >
      </p>
    </div>
    <!-- 表格 -->
    <div class="table">
      <h3>药品说明</h3>
      <table>
        <thead>
          <tr>
            <td>药品名称</td>
            <td>{{ item.name }}</td>
          </tr>
          <tr>
            <td>生产企业</td>
            <td>广西玉林制药集团有限责任公司</td>
          </tr>
          <tr>
            <td>药品规格</td>
            <td>0.5克*30粒</td>
          </tr>
          <tr>
            <td>药品成分</td>
            <td>地黄、当归、单参、苦参、蝉悦、黄芩、白鲜皮、甘草。</td>
          </tr>
          <tr>
            <td>用药禁忌</td>
            <td>药品禁忌。孕妇禁用</td>
          </tr>

          <tr>
            <td>主治功能</td>
            <td>
              养血润燥、祛风止痒、用于血虚风燥所致的风瘙痒，症见皮肤干燥、脱屑、瘙痒、伴有抓痕、血瘕、色素沉着；皮肤瘙痒
            </td>
          </tr>
          <tr>
            <td>用法用量</td>
            <td>口服。一次3-4粒，一日3次</td>
          </tr>
          <tr>
            <td>储藏条件</td>
            <td>常温10-30°C</td>
          </tr>
          <tr>
            <td>不良反应</td>
            <td>尚不明确</td>
          </tr>
          <tr>
            <td>批准文号</td>
            <td>国药准字Z45021731</td>
          </tr>
        </thead>
      </table>
    </div>
    <div style="text-align: center; color: #888; line-height: 3rem">—————商品详情—————</div>

    <div style="width: 100%; background-color: #fff; padding: 1rem">
      <p style="font-size: 0.9rem">消费提示</p>
      <p style="font-size: 0.8rem; margin-top: 0.3rem; color: #666">{{ imgItem.consume_tip }}</p>
      <div v-html="imgItem.detail_page" ref="detailPage"></div>
    </div>
    <div>
      <img :src="imgItem.warm_price_img_url" alt="" />
    </div>
  </div>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" />
    <van-action-bar-icon icon="cart-o" text="购物车" @click="toCart" />
    <van-action-bar-button type="warning" text="加入购物车" @click="show = true" />
    <van-action-bar-button type="danger" text="立即购买" />
  </van-action-bar>
  <!-- 弹出层 -->
  <van-popup
    v-model:show="show"
    closeable
    position="bottom"
    style="height: 50%; border-radius: 0.5rem 0.5rem 0 0"
  >
    <div class="cartImgae">
      <img :src="item.image" />
      <div>
        <p style="font-size: 1.2rem; color: red">￥{{ item.price }}</p>
        <p style="font-size: 0.8rem; color: #666; margin-top: 0.3rem">剩余58件</p>
        <p style="font-size: 0.8rem; color: #666; margin-top: 0.3rem">{{ buttontitle }}</p>
      </div>
    </div>
    <div style="width: 100%; padding: 1rem; font-size: 0.9rem">规格</div>
    <div class="albutton" @click="albutton">
      <div v-if="showbutton">
        <button style="background-color: red; color: #fff">6粒</button>
      </div>
      <div v-else>
        <button>6粒</button>
      </div>
    </div>
    <div class="Subnum">
      <div>购买数量</div>
      <div>
        <van-stepper v-model="num" />
      </div>
    </div>
    <div @click="AddCart">
      <van-action-bar>
        <van-action-bar-button type="danger" text="确定" />
      </van-action-bar>
    </div>
  </van-popup>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
const onClickLeft = () => history.back()
const route = useRoute()
const item = route.query
const imgItem = ref({})
var detailPage = ref(null)
const buttontitle = ref('已选300毫升+1个')
const num = ref(1)
const show = ref(false)
var showbutton = ref(true)
const checked = ref(true | false)
var cartData = ref(JSON.parse(localStorage.getItem('cartData')) || [])
const getDetail = async () => {
  var res = await axios.get('/static/mall/shop_spu/detail/tail/', {
    params: {
      shop_spu_id: item.shop_spu_id,
    },
  })
  // console.log(res.data.data)
  imgItem.value = res.data.data
  // console.log(item)
}
getDetail()
const albutton = () => {
  showbutton.value = !showbutton.value
  if (showbutton.value) {
    buttontitle.value = '已选300毫升+1个'
  } else {
    buttontitle.value = '请选择 价格'
  }
}
const AddCart = () => {
  const data = {
    ...item,
    num: num.value,
    checked: true,
  }
  var res = cartData.value.find((item) => {
    if (item.title == data.vendor) {
      return true
    }
  })
  console.log(res)

  if (res) {
    res.goods.find((item) => {
      if (item.shop_spu_id == data.shop_spu_id) {
        return (item.num = item.num + num.value)
      }
    })
    if (!res.goods.find((item) => item.shop_spu_id == data.shop_spu_id)) {
      res.goods.push(data)
    }
  } else {
    cartData.value.push({ title: item.vendor, checked: true, goods: [data] })
  }
  console.log(cartData.value)
  mounted(cartData.value)
  show.value = false
}

function mounted(cartData) {
  const mergedArr = Object.values(
    cartData.reduce((acc, current) => {
      const key = current.title
      if (!acc[key]) {
        acc[key] = { ...current }
      } else {
        acc[key].goods.push(current.goods[0])
      }
      return acc
    }, {}),
  )
  console.log(mergedArr)
  cartData = mergedArr
  localStorage.setItem('cartData', JSON.stringify(cartData))
}

const toCart = () => {
  window.location.href = '/cart'
}
</script>
